<!-- To display the available Icon set which is not commented in the component. -->

> Hint: use **reverse** to make your icon look like a button

## Available Icon Sets

The icon sets in React Native Elements are now powered by modular icon packages from
[react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).
The original `react-native-vector-icons` library has been deprecated, and we now use individual packages for each icon set to reduce bundle size and improve performance.

To use an icon set, you need to install the corresponding package:

- [antdesign](http://ant.design/components/icon/) - `@react-native-vector-icons/ant-design`
- [entypo](http://www.entypo.com/) - `@react-native-vector-icons/entypo`
- [evilicon](http://evil-icons.io/) - `@react-native-vector-icons/evil-icons`
- [feather](https://feathericons.com/) - `@react-native-vector-icons/feather`
- [font-awesome](https://fontawesome.com/v4.7.0/) - `@react-native-vector-icons/fontawesome`
- [font-awesome-5](https://fontawesome.com/) - `@react-native-vector-icons/fontawesome5`
- [font-awesome-6](https://fontawesome.com/) - `@react-native-vector-icons/fontawesome6`
- [fontisto](https://www.fontisto.com/icons) - `@react-native-vector-icons/fontisto`
- [foundation](http://zurb.com/playground/foundation-icon-fonts-3) - `@react-native-vector-icons/foundation`
- [ionicon](http://ionicons.com/) - `@react-native-vector-icons/ionicons`
- [material](https://material.io/tools/icons) - `@react-native-vector-icons/material-icons`
- [material-community](https://materialdesignicons.com/) - `@react-native-vector-icons/material-design-icons` (use `material-design` as type)
- [octicon](https://octicons.github.com/) - `@react-native-vector-icons/octicons`
- [simple-line-icon](https://simplelineicons.github.io/) - `@react-native-vector-icons/simple-line-icons`
- [zocial](http://weloveiconfonts.com/) - `@react-native-vector-icons/zocial`

To check all the supported icons, visit [react-native-vector-icons directory](https://oblador.github.io/react-native-vector-icons/)

## Custom Icon Fonts

Register your own custom icons by calling
`registerCustomIconType('customid', customFont)`. Create a custom font by
following the
[ instructions for creating a custom font here](https://github.com/oblador/react-native-vector-icons#custom-fonts).
Also, you can use [Fontello](http://fontello.com/) to generate custom icon
fonts.

```SnackPlayer name=RNE Icon
import React from 'react';
import { View, Text } from 'react-native';
import { Icon } from '@rneui/themed';

export default () => {
return (
  <>
    <View
      style={{
        alignItems: 'center',
        paddingVertical: 5,
        flexGrow: 1,
      }}
    >
      <Icon
        name='rowing' />

      <Icon
        name='g-translate'
        color='#00aced' />

      <Icon
        name='sc-telegram'
        type='evilicon'
        color='#517fa4'
      />

      <Icon
        reverse
        name='american-football'
        type='ionicon'
        color='#517fa4'
      />

      <Icon
        raised
        name='heartbeat'
        type='font-awesome'
        color='#f50'
        onPress={() => console.log('hello')} />
    </View>
  </>
);
};
```
